<template>
    <div class="custom-navbar">
        <nut-navbar fixed>
            <template #left>
                <div style="color: #fff; padding-top: 8px">
                    <span class="icon-menu" @click="showLeft = true"></span>
                </div>
            </template>
            <template #content>
                <img :src="LogoImg"
                     alt=""
                     style="height: 100%; width: 120px"
                     draggable="false">
            </template>
            <template #right>
                <span style="color: #fff" @click="showRight = true">
                    <i class="icon-message"></i>
                    <i class="icon-user ml10">
                        <i class="icon-inner"></i>
                    </i>
                    <rect-up width="12"
                             class="ml5"
                             style="margin-bottom: -2px"></rect-up>
                </span>
            </template>
        </nut-navbar>
    </div>

    <router-view v-slot="{ Component }">
        <keep-alive include="Tasklist">
            <component :is="Component"></component>
        </keep-alive>
    </router-view>
    <copy-right></copy-right>

    <nut-popup v-model:visible="showLeft"
               position="left"
               :style="{ width: '45%', height: '100%' }">
        <div class="left-menu-box">
            <span class="icon-menu" @click="showLeft = false"></span>
            <div class="left-men-item mt30" @click="linkTo('/')">
                <span class="left-menu-1"></span>
                首页
            </div>
            <div class="left-men-item" @click="linkTo('/gameLib')">
                <span class="left-menu-2"></span>
                游戏库
            </div>
            <div class="left-men-item" @click="linkTo('/message')">
                <span class="left-menu-3"></span>
                最新消息
            </div>
            <div class="left-men-item" @click="linkTo('/topicDiscussion')">
                <span class="left-menu-4"></span>
                讨论
            </div>
        </div>
    </nut-popup>

    <nut-popup v-model:visible="showRight"
               position="right"
               :style="{ width: '60%', height: '100%' }">
        <div class="right-menu-box">
            <p class="nikeName">这里是昵称有六个字</p>
            <nut-divider style="color: #777777; padding: 0 2%; margin-bottom: 10px"></nut-divider>
            <!-- 我的个人资料 -->
            <div class="personInfo">
                <p class="personInfo-title" @click="linkTo('/profile')">
                    <img src="./assets/person.webp"
                         alt=""
                         style="width: 20px; margin-right: 22px">
                    账户资料设定
                </p>
                <div class="person-item"
                     @click="(showRight = false), (showAuth = true)">
                    登录与安全性
                </div>
            </div>
            <nut-divider style="color: #777777; padding: 0 2%; margin-bottom: 10px"></nut-divider>

            <div class="personInfo" @click="linkTo('/publish')">
                <p class="personInfo-title">
                    <img src="./assets/logout.webp"
                         alt=""
                         style="width: 20px; margin-right: 22px">发布者
                </p>
            </div>
            <div class="personInfo">
                <p class="personInfo-title">
                    <img src="./assets/logout.webp"
                         alt=""
                         style="width: 20px; margin-right: 22px">退出登出
                </p>
            </div>
        </div>
    </nut-popup>

    <nut-popup v-model:visible="showAuth"
               position="center"
               :style="{
                   width: '80%',
                   overflow: 'visible',
                   backgroundColor: 'transparent',
               }">
        <div class="close" @click="showAuth = false">
            ×
        </div>
        <div style="
                overflow: hidden;
                border-radius: 16px;
                background-color: #3f3f3f;
            ">
            <auth-dialog></auth-dialog>
        </div>
    </nut-popup>

    <!--发布者登录-->
    <nut-popup v-model:visible="publisherLoginVisible"
               position="center"
               :style="{
                   width: '80%',
                   overflow: 'visible',
                   backgroundColor: 'transparent',
               }">
        <div class="close" @click="publisherLoginVisible = false">
            ×
        </div>
        <div style="
                overflow: hidden;
                border-radius: 16px;
                background-color: #3f3f3f;
            ">
            <publisher-login></publisher-login>
        </div>
    </nut-popup>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { RectUp } from '@nutui/icons-vue'
import CopyRight from '@/components/copyright.vue'
import { useRouter } from 'vue-router'
import LogoImg from '@/assets/logo.png'
import AuthDialog from '@/components/AuthDialog/Login.vue'
import PublisherLogin from '@/components/AuthDialog/PublisherLogin.vue'
import { provide } from 'vue'

const showLeft = ref(false)
const showRight = ref(false)
const showAuth = ref(false)
const publisherLoginVisible = ref(false)
provide('publisherLoginVisible', publisherLoginVisible)
provide('showAuth', showAuth)

const Router = useRouter()
const linkTo = (path: string) => {
    Router.push(path)
    showLeft.value = false
    showRight.value = false
}
</script>

<style scoped lang="scss">
.custom-navbar {
    // background-color: #3f3f3f;
    --nut-navbar-background: #3f3f3f;
    -–nut-navbar-box-shadow: 0 1px 7px 0 rgb(133, 133, 135);
    color: #fff;
}

.icon-menu {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url("./assets/menu.png") no-repeat center;
    background-size: contain;
}

.left-menu-box {
    width: 100%;
    height: 100%;
    background-color: #3f3f3f;
    overflow: hidden;
    padding: 20px 30px;

    .left-men-item {
        padding-bottom: 30px;
        display: flex;
        align-items: center;
        font-size: 18px;
        color: #fff;

        a {
            color: #fff;
        }
    }

    .left-menu-1 {
        display: inline-block;
        width: 23px;
        height: 23px;
        background: url("./assets/82-1.png") no-repeat center;
        background-size: contain;
        margin-right: 10px;
    }

    .left-menu-2 {
        display: inline-block;
        width: 23px;
        height: 23px;
        background: url("./assets/82-2.png") no-repeat center;
        background-size: contain;
        margin-right: 10px;
    }

    .left-menu-3 {
        display: inline-block;
        width: 23px;
        height: 23px;
        background: url("./assets/82-3.png") no-repeat center;
        background-size: contain;
        margin-right: 10px;
    }

    .left-menu-4 {
        display: inline-block;
        width: 23px;
        height: 23px;
        background: url("./assets/82-4.png") no-repeat center;
        background-size: contain;
        margin-right: 10px;
    }
}

.right-menu-box {
    width: 100%;
    height: 100%;
    background-color: #818181;
    overflow: hidden;
    padding: 20px 30px;
    color: #fff;

    .nikeName {
        font-size: 16px;
    }

    .personInfo {
        margin-bottom: 30px;

        .personInfo-title {
            display: flex;
            align-items: center;
        }

        .person-item {
            margin: 15px 0;
            padding-left: 42px;
        }
    }
}

.close {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(100%, -100%);
    color: #fff;
    font-size: 26px;
    border: 2px solid #fff;
    z-index: 1000;
    border-radius: 4px;
    padding: 2px 6px;
}

.icon-message {
    display: inline-block;
    width: 16px;
    height: 11px;
    background: url("./assets/message.png") no-repeat center;
    background-size: contain;
}

.icon-user {
    display: inline-block;
    width: 21px;
    text-align: center;
    line-height: 21px;
    height: 21px;
    background-color: #818181;
    border-radius: 50%;

    .icon-inner {
        display: inline-block;
        width: 9px;
        height: 9px;
        background: url("./assets/user.png") no-repeat center;
        background-size: contain;
    }
}
</style>
